<template>
  <div class="troubd">
    <canvas ref="vsiCanvas" width="200" height="200"></canvas>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      targetSpeed: 0,
      currentSpeed: 0,
      centerX: 100,
      centerY: 100,
      radius: 100,
      startTime: null,
    };
  },
  computed: {
    ...mapGetters(["troubdSpeed", "getWebSocket", "getConnectionStatus"]),
  },
  mounted() {
    this.smoothUpdateVSI();
    setInterval(() => {
      // 将 this.troubdSpeed 的值作为参数传递给随机左和随机右的方法
      let roate = Number(this.targetSpeed) + Number(this.troubdSpeed);
      this.targetSpeed = roate;
      // if (this.troubdSpeed < 0) {
      //   this.jumpToLeft(this.troubdSpeed * 18);
      // } else {
      //   this.jumpToRight(this.troubdSpeed * 18);
      // }
    }, 5);
    setInterval(() => {
      if (Math.random() < 0.5) {
        this.jumpToLeft();
      } else {
        this.jumpToRight();
      }
    }, 5000);
  },
  methods: {
    cancleInterVal() {
      clearInterval(this.startTime);
    },
    actionGamepe() {
      this.startTime = setInterval(() => {
        let troubdData = {
          code: "troubdAngle",
          time: new Date().getTime(),
          troubdAngle: this.getPointerDegrees(),
        };
        // console.log("troubdData", troubdData);
        if (this.getConnectionStatus) {
          this.getWebSocket.send(JSON.stringify(troubdData));
        }
      }, 60);
    },
    //计算指针度数
    getPointerDegrees() {
      let currentAngle = -Math.PI / 2 + (this.currentSpeed / 330) * Math.PI * 2;
      let currentDegrees = Math.abs((currentAngle * 180) / Math.PI);
      if (currentDegrees > 0) {
        currentDegrees -= 90;
      } else {
        currentDegrees += 90;
      }
      currentDegrees = currentDegrees % 360;
      if (currentDegrees < 0) {
        currentDegrees = -currentDegrees;
      }
      return currentDegrees;
      // console.log("currentDegrees", currentDegrees);
    },
    //绘制图标
    drawBackground() {
      const ctx = this.$refs.vsiCanvas.getContext("2d");
      const centerX = this.centerX;
      const centerY = this.centerY;
      const radius = this.radius;
      ctx.fillStyle = "transparent";
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.fill();
      // 绘制刻度线和文本
      ctx.strokeStyle = "#fff";
      ctx.lineWidth = 1;
      ctx.font = "10px Arial";
      ctx.fillStyle = "#fff";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      for (let i = 0; i <= 10; i++) {
        let n = i / 10; // 刻度值从0到1，每个刻度间隔0.1
        ctx.lineWidth = 1.5; // 刻度线细一点
        // 绘制左边刻度文本和刻度线
        if (n !== 0 && n !== 1) {
          ctx.fillText(
            n.toFixed(1),
            centerX +
              (radius - 30) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY + (radius - 30) * Math.sin(((-90 - i * 18) * Math.PI) / 180)
          );
          this.drawTick(
            ctx,
            centerX +
              (radius - 18) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY +
              (radius - 18) * Math.sin(((-90 - i * 18) * Math.PI) / 180),
            centerX + (radius - 8) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY + (radius - 8) * Math.sin(((-90 - i * 18) * Math.PI) / 180),
            ctx.lineWidth
          );
        }
        if (n !== 0 && n !== 1) {
          ctx.fillText(
            n.toFixed(1),
            centerX -
              (radius - 30) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY + (radius - 30) * Math.sin(((-90 - i * 18) * Math.PI) / 180)
          );
          this.drawTick(
            ctx,
            centerX -
              (radius - 18) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY +
              (radius - 18) * Math.sin(((-90 - i * 18) * Math.PI) / 180),
            centerX - (radius - 8) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY + (radius - 8) * Math.sin(((-90 - i * 18) * Math.PI) / 180),
            ctx.lineWidth
          );
        }
        // 修正0和1的显示
        if (n === 0 || n === 1) {
          ctx.fillText(
            n.toFixed(0),
            centerX +
              (radius - 30) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY + (radius - 30) * Math.sin(((-90 - i * 18) * Math.PI) / 180)
          );
          this.drawTick(
            ctx,
            centerX +
              (radius - 18) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY +
              (radius - 18) * Math.sin(((-90 - i * 18) * Math.PI) / 180),
            centerX + (radius - 8) * Math.cos(((-90 - i * 18) * Math.PI) / 180),
            centerY + (radius - 8) * Math.sin(((-90 - i * 18) * Math.PI) / 180),
            ctx.lineWidth
          );
        }
      }
    },
    //绘制刻度
    drawTick(ctx, x1, y1, x2, y2, lineWidth) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.lineWidth = lineWidth;
      ctx.stroke();
    },
    //绘制指针
    drawPointer(speed) {
      const ctx = this.$refs.vsiCanvas.getContext("2d");
      ctx.save();
      ctx.translate(this.centerX, this.centerY);
      let currentAngle = -Math.PI / 2 + (this.currentSpeed / 330) * Math.PI * 2;
      let targetAngle = -Math.PI / 2 + (speed / 330) * Math.PI * 2;
      let clockwise = false;
      if (
        (currentAngle < 0 && targetAngle > 0) ||
        (currentAngle > 0 && targetAngle < 0)
      ) {
        clockwise = true;
      }
      if (clockwise) {
        if (targetAngle < currentAngle) {
          targetAngle += Math.PI * 2;
        }
      } else {
        if (targetAngle > currentAngle) {
          targetAngle -= Math.PI * 2;
        }
      }
      ctx.rotate(targetAngle);
      ctx.shadowBlur = 10;
      ctx.shadowColor = "#fff";
      ctx.fillStyle = "#fff";
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(3, -3);
      ctx.lineTo(this.radius * 0.6, 0);
      ctx.lineTo(3, 3);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
      ctx.beginPath();
      ctx.arc(this.centerX, this.centerY, 5, 0, 2 * Math.PI);
      ctx.fillStyle = "#fff";
      ctx.fill();
    },
    //更新速度指示器
    updateVSI(speed) {
      if (this.$refs.vsiCanvas == undefined) {
        return;
      }
      const ctx = this.$refs.vsiCanvas.getContext("2d");
      ctx.clearRect(
        0,
        0,
        this.$refs.vsiCanvas.width,
        this.$refs.vsiCanvas.height
      );
      this.drawBackground();
      this.drawPointer(speed);
    },
    //平滑更新速度指示器
    smoothUpdateVSI() {
      const difference = this.targetSpeed - this.currentSpeed;
      if (Math.abs(difference) < 0.1) {
        this.currentSpeed = this.targetSpeed;
      } else {
        this.currentSpeed += difference * 0.05;
      }
      this.updateVSI(this.currentSpeed);
      requestAnimationFrame(this.smoothUpdateVSI);
    },
    getRandomAngle() {
      return Math.random() * 130;
    },
    // 随机左方法接受一个速度参数，如果未提供参数，则使用默认的随机速度
    jumpToLeft(speed = this.getRandomAngle()) {
      this.targetSpeed = -speed;
      // console.log("left:", this.targetSpeed);
    },
    // 随机右方法接受一个速度参数，如果未提供参数，则使用默认的随机速度
    jumpToRight(speed = this.getRandomAngle()) {
      this.targetSpeed = speed;
      // console.log("right:", this.targetSpeed);
    },
  },
};
</script>

<style>
.troubd {
  width: 240px;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../../assets/images/gauge.png");
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  /* background-color: transparent; */
  margin: 0 10px;
}
</style>
